iT邦幫忙

2025 iThome 鐵人賽

DAY 1
2

Animate UI? 這什麼?沒聽過欸

TLDR: 透過 Animate UI 元件,讓網頁動起來~

Animate UI 受到 Shadcn/uiMagic UI 的啟發,提供 React 開發者易於整合和擴展的元件。它以 Tailwind CSSMotion 為基礎打造,並且非常方便整合 Shadcn/uiRadix UIBase UIHeadless UI 框架。

並且在想要使用的地方,透過 CLI 或直接複製程式碼到專案中,即可使用。

Animate UI 核心特色

  1. 開放原始碼:讓開發者可以自行修改每個元件的核心程式碼,可作彈性的運用,甚至修改成自己風格的程式碼。
  2. 專為 shadcn/ui 和 Magic UI 完美搭配,提升每個組件的互動與順暢感
  3. 內建多種動畫效果。除了 UI 元件動畫之外,還包含文字特效、背景動畫等效果(如打字效果、漸層背景、煙火背景等)
  4. 採用 MIT 條款,允許任何目的的使用,包括商業用途。

如何安裝 Aniamte UI

本篇文章主要以 shadcn/ui CLI 作為操作,並且使用 Next.JS 為 Web 開發框架。亦可使用
Vite、Laravel、React Router、Remix、Astro、TanStack Start、TanStack Router 等套件。

其他框架安裝步驟請參考:Shadcn/ui Installation

  1. 安裝 Node.JS,在系列教學,我會使用 Node.js v24.7.0,若想要用 Node.js v22.19.0 (LTS) 也是完全 OK der~

    在教學中,會使用 npx 安裝,若有需要使用 npm 進行也可以自行調整。詳細差異可參考:[NodeJS] npx 是什麼? 跟 npm 差在哪?

  2. 建立專案,並且根據專案類型選擇專案形式。至於該選擇哪種專案,可以參考 Summer。桑莫。夏天 - 該用 Monorepo 嗎?比較 Monolith vs Multi-Repo vs Monorepo,這邊我以預設的 Next.js 為例。

    npx shadcn@latest init
    

  3. 設定專案名稱,這邊我設定為 day1

  4. 設定主色調,詳細顏色可以參考 Shadcn/ui Colors

  5. 看到 Success 就代表完成拉!

  6. 接著將終端機切換到專案根目錄中,並執行 npm run dev

    cd day1
    npm run dev
    
    

  7. 打開瀏覽器,輸入 http://localhost:3000 即可看到網站畫面

小結

今天的我們學會如何啟用專案,明天將會繼續介紹 Animate UI 編輯器設定 - MCP,讓我們在開發時可以更得心應手 🎉 。


下一篇
Day 02 - Animate UI 編輯器設定 - MCP
系列文
讓你的 UI 動起來:Animate-UI 初探6
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言